<html>
<head>
    <title>Calling a Web API as a user authenticated with Msal.js app</title>
    <style>
        .hidden {
            visibility: hidden
        }

        .visible {
            visibility: visible
        }

        .response {
            border: solid;
            border-width: thin;
            background-color: azure;
            padding: 2px;
        }
    </style>
</head>
<body>
    <!-- bluebird only needed if this page needs to run on Internet Explorer -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js" class="pre"></script>
    <script src="dist/msal.js" class="pre"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" class="pre"></script>

    <h2>Getting an access token with Azure AD B2C and calling a Web API</h2>
    <div>
        <div id="label">Sign-in with Microsoft Azure AD B2C</div>
        <button id="auth" onclick="login()">Login</button>
        <button id="callApiButton" class="hidden" onclick="callApi()">Call Web API</button>
    </div>

    <pre class="response"></pre>

    <script class="pre">
        // The current application coordinates were pre-registered in a B2C tenant.
        var applicationConfig = {
            clientID: 'e760cab2-b9a1-4c0d-86fb-ff7084abd902',
            authority: "https://login.microsoftonline.com/tfp/fabrikamb2c.onmicrosoft.com/b2c_1_susi",
            b2cScopes: ["https://fabrikamb2c.onmicrosoft.com/demoapi/demo.read"],
            webApi: 'https://fabrikamb2chello.azurewebsites.net/hello',
        };
    </script>

    <script>
        "use strict";
        var logger = new Msal.Logger(loggerCallback, { level: Msal.LogLevel.Verbose });
        function loggerCallback(logLevel, message, piiEnabled) {
            console.log(message);
        }

        var clientApplication = new Msal.UserAgentApplication(applicationConfig.clientID, applicationConfig.authority, authCallback, { logger: logger, cacheLocation: 'localStorage' });
        function authCallback(errorDesc, token, error, tokenType) {
            if (token) {
            }
            else {
                logMessage(error + ":" + errorDesc);
            }
        }

        function login() {
            clientApplication.loginPopup(applicationConfig.b2cScopes).then(function (idToken) {
                clientApplication.acquireTokenSilent(applicationConfig.b2cScopes).then(function (accessToken) {
                    updateUI();
                }, function (error) {
                    clientApplication.acquireTokenPopup(applicationConfig.b2cScopes).then(function (accessToken) {
                        updateUI();
                    }, function (error) {
                        logMessage("Error acquiring the popup:\n" + error);
                    });
                })
            }, function (error) {
                logMessage("Error during login:\n" + error);
            });
        }

        function updateUI() {
            var userName = clientApplication.getUser().name;
            logMessage("User '" + userName + "' logged-in");
            var authButton = document.getElementById('auth');
            authButton.innerHTML = 'logout';
            authButton.setAttribute('onclick', 'logout();');
            var label = document.getElementById('label');
            label.innerText = "Hello " + userName;
            var callWebApiButton = document.getElementById('callApiButton');
            callWebApiButton.setAttribute('class', 'visible');
        }

        function callApi() {
            clientApplication.acquireTokenSilent(applicationConfig.b2cScopes).then(function (accessToken) {
                callApiWithAccessToken(accessToken);
            }, function (error) {
                clientApplication.acquireTokenPopup(applicationConfig.b2cScopes).then(function (accessToken) {
                    callApiWithAccessToken(accessToken);
                }, function (error) {
                    logMessage("Error acquiring the access token to call the Web api:\n" + error);
                });
            })
        }

        function callApiWithAccessToken(accessToken) {
            // Call the Web API with the AccessToken
            $.ajax({
                type: "GET",
                url: applicationConfig.webApi,
                headers: {
                    'Authorization': 'Bearer ' + accessToken,
                },
            }).done(function (data) {
                logMessage("Web APi returned:\n" + JSON.stringify(data));
            })
                .fail(function (jqXHR, textStatus) {
                    logMessage("Error calling the Web api:\n" + textStatus);
                })
        }

        function logout() {
            // Removes all sessions, need to call AAD endpoint to do full logout
            clientApplication.logout();
        }

        function logMessage(s) {
            document.body.querySelector('.response').appendChild(document.createTextNode('\n' + s));
        }

    </script>
</body>
</html>
